<template>
  <el-dialog
    top="30px"
    width="800px"
    title="项目复核"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <div id="print-wrap">
      <table class="table table-bordered vertical-align-middle">
        <tbody>
          <tr>
            <td rowspan="5" class="text-center bg-gray font-weight-bold">主体信息</td>
            <td class="text-center bg-light">主体姓名</td>
            <td colspan="3">{{ relatedData.customer_name }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">经营者姓名</td>
            <td style="min-width: 150px">{{ relatedData.corp_name }}</td>
            <td class="text-center bg-light">身份证号码</td>
            <td>{{ relatedData.lender_idcard }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">所在地址</td>
            <td colspan="3">{{ relatedData.address }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">联系方式</td>
            <td colspan="3">{{ relatedData.mobile_no }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">生产经营类型</td>
            <td colspan="3">{{ enumFarmType[relatedData.farm_type] || '-' }}</td>
          </tr>

          <tr>
            <td rowspan="5" class="text-center bg-gray font-weight-bold">货款信息</td>
            <td class="text-center bg-light">贷款银行</td>
            <td colspan="3">{{ relatedData.bank_name }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">批复金额</td>
            <td colspan="3">{{ relatedData.approved_funds }} 万元</td>
          </tr>
          <tr>
            <td class="text-center bg-light">贷款年限</td>
            <td colspan="3">{{ relatedData.load_years }} 年</td>
          </tr>
          <tr>
            <td class="text-center bg-light">担保费率</td>
            <td colspan="3">{{ relatedData.warranty_rate || '-' }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">主要用途</td>
            <td colspan="3">{{ relatedData.funds_use_dir || '-' }}</td>
          </tr>
          <tr>
            <td rowspan="2" class="text-center bg-gray font-weight-bold">复核意见</td>
            <td class="text-center bg-light">反担保措施</td>
            <td colspan="3" :class="isViewMode ? '' : 'report-input-td'">
              <textarea
                rows="4"
                class="form-control"
                v-model="guaranteeOpinion"
                v-if="!isViewMode"
              ></textarea>
              <span v-else>{{ relatedData.counter_guarantee || '-' }}</span>
            </td>
          </tr>
          <tr>
            <td class="text-center bg-light">复核意见</td>
            <td colspan="3" :class="isViewMode ? '' : 'report-input-td'">
              <textarea
                rows="4"
                class="form-control"
                v-model="resOpinion"
                v-if="!isViewMode"
              ></textarea>
              <span v-else>{{ relatedData.res_option || '-' }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="text-center" v-if="!isViewMode">
      <el-button class="btn-long" type="primary" @click="handlePass">通过</el-button>
      <el-button class="btn-long" type="danger" @click="handleReject">不通过</el-button>
    </div>
    <div class="text-center" v-else>
      <el-button class="btn-long" type="primary" icon="el-icon-printer" @click="handlePrint">
        打印
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { enumFarmType } from '@/credit/plugins/enum'
import { printHtml } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    visible: Boolean,
    viewMode: Boolean,
    relatedData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      enumFarmType,
      guaranteeOpinion: '',
      resOpinion: '',
      tableName: 'customer_related',
    }
  },
  computed: {
    ...mapGetters(['userId']),
    isViewMode() {
      return this.viewMode || +this.relatedData.res_status !== 0
    },
  },
  watch: {
    relatedData: {
      handler: function () {
        this.guaranteeOpinion = this.relatedData.counter_guarantee
        this.resOpinion = this.relatedData.res_option
      },
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handlePass() {
      if (!this.validator()) {
        return
      }

      this.$utils
        .msgbox({
          message: `确定通过?`,
          type: 'info',
          beforeClose: () =>
            this.$api.updateData(
              this.$serviceName,
              this.tableName,
              this.relatedData.customer_related_id,
              {
                counter_guarantee: this.recommendOpinion,
                res_option: this.resOpinion,
                res_status: 1,
              }
            ),
        })
        .then(() => {
          this.$message.success('操作成功！')
          this.$emit('success', false)
          this.$store.dispatch('getTaskCountTown')
          this.beforeClose()
        })
        .catch(() => this.$message.error(`操作失败，请重试！`))
    },
    handleReject() {
      this.$prompt('请输入未通过原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: value => (!value ? '请输入不通过原因' : true),
      }).then(({ value }) => {
        this.$api
          .updateData(this.$serviceName, this.tableName, this.relatedData.customer_related_id, {
            counter_guarantee: this.recommendOpinion,
            res_fail_reason: value,
            res_status: 2,
            res_date: this.$utils.dateFormat(new Date()),
            res_person: this.userId,
          })
          .then(() => {
            this.$message.success('操作成功！')
            this.$emit('success', false)
            this.beforeClose()
          })
          .catch(() => this.$message.error(`操作失败，请重试！`))
      })
    },
    validator() {
      if (!this.guaranteeOpinion) {
        this.$message.error('请输入反担保措施！')
        return false
      }
      if (!this.resOpinion) {
        this.$message.error('请输入复核意见！')
        return false
      }
      return true
    },
    handlePrint() {
      printHtml(
        document.getElementById('print-wrap').innerHTML,
        `
        .vertical-align-middle td {vertical-align: middle;}
      `
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.vertical-align-middle td {
  vertical-align: middle;
}
.bg-gray {
  background-color: $gray-200;
}
</style>
